<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抖音评论特效</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    .content {
        height: 20rem;
        position: relative;
        background: linear-gradient(45deg, #f60, #ffe);
    }

    .list-item {
        position: absolute;
        bottom: 0;
        left: 20px;
        opacity: 0;
        color: #0a0a0a;
        padding: 5px 10px;
        border-radius: 22px;
        background: #ffffff61;
        animation: moveUp linear infinite;
        animation-duration: calc(1s * var(--t));
        animation-delay: calc(1s * var(--d));
    }

    @keyframes moveUp {
        0% {
            left: 0;
            bottom: 0;
	        opacity: 1;
            transform: scale(0.2);
        }

        10% {
        	transform: scale(0.5);
        }

        75% {
            opacity: 1;
        }

        100% {
            opacity: 0;
            bottom: 250px;
            transform: scale(1);
        }
    }
    </style>
</head>

<body>
    <div class="content">
        <div class="comment-list-wrap" style="--t: 8;">
            <div class="list-item" style="--d: 0;">111</div>
            <div class="list-item" style="--d: 1;">222</div>
            <div class="list-item" style="--d: 2;">333</div>
            <div class="list-item" style="--d: 3;">444</div>
            <div class="list-item" style="--d: 4;">555</div>
            <div class="list-item" style="--d: 5;">666</div>
            <div class="list-item" style="--d: 6;">777</div>
            <div class="list-item" style="--d: 7;">888</div>
        </div>
    </div>
</body>

</html>